// 通过vue-router插件实现模拟路由配置
import { createRouter, createWebHistory } from 'vue-router'
// 引入项目的标题
import setting from '@/setting'
// 引入常量路由
import { constantRouter } from './routes'
// 引入进度条样式
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'
// 不要进度条加载的圆圈
nprogress.configure({ showSpinner: false })
// 获取用户相关小仓库内部token，去判断用户是否登录成功
import useUserStore from '@/store/modules/user'

// 创建路由器
const router = createRouter({
  // 路由模式history模式
  history: createWebHistory(),
  // 路由配置
  routes: constantRouter,
  // 滚动行为
  scrollBehavior() {
    return {
      left: 0,
      top: 0,
    }
  },
})

router.beforeEach(async (to: any, from: any, next: any) => {
  // 网页标题设置
  document.title = `${setting.title} - ${to.meta.title}`
  // to：你将要访问的路由
  // from：你从哪个路由来到当前路由
  // next：路由的放行函数，必写
  // 使用userStore接收数据，只能在router函数里面接收，外部接收会报错
  const userStore = useUserStore()
  nprogress.start()
  // 获取token，判断用户是否登录
  if (userStore.token) {
    // 已登录
    // 禁止访问login，访问了会重定向回首页
    if (to.path === '/login') {
      // console.log()
      next({ path: '/' })
    } else {
      // 有用户信息
      if (userStore.username && userStore.avatar) {
        // 放行
        next()
      } else {
        // 如果没有用户信息，在守卫这里发请求获取到了用户信息再放行
        try {
          // 获取用户信息
          await userStore.userInfo()
          next()
        } catch (error) {
          // 请求失败，token过期
          // 或者用户手动修改本地存储token
          // 退出登录 -> 用户相关的数据清空
          await userStore.userLogout()
          next({ path: '/login', query: { redirect: to.path } })
        }
      }
    }
  } else {
    // 未登录
    if (to.path === '/login') {
      next()
    } else {
      // 未登录不让访问除login的页面，访问了会重定向回login，并把要去的地址给到redirect上
      next({ path: '/login', query: { redirect: to.path } })
    }
  }
})
router.afterEach(() => {
  nprogress.done()
})
export default router
